{% load static from staticfiles %}

    <div>

        <el-form ref="form" :model="form" label-width="80px" method="get" action="{% url 'blog:haystack_search' %}">
            <el-input v-model="form.name" placeholder="Search this site..." name="q"></el-input>
        </el-form>


    </div>
    <br>
    <el-card class="box-card">
      <div class="text item">
          <a href="{% url 'users:aboutme' %}">关于作者</a>
          <div style="text-align: center">
              <img src="/media/{{ about.avatar }}" alt="{{ info.title }}" style="height: 100px;width: 100px">
          </div>
          <div style="font-size: 14px">
              {{ about.summary |safe }}
          </div>
          <div>
              {% if about.weibo %}
                    <a href="{{ about.weibo }}" target="_blank"><img src="{% static '/icon/weibo.png' %}" alt=""></a>
              {% endif %}
              {% if about.twitter %}
                    <a href="{{ about.twitter }}" target="_blank"><img src="{% static '/icon/twitter.png' %}" alt=""></a>
              {% endif %}
              {% if about.github %}
                    <a href="{{ about.github }}" target="_blank"><img src="{% static '/icon/github.png' %}" alt=""></a>
              {% endif %}
              {% if about.zhihu %}
                    <a href="{{ about.zhihu }}" target="_blank"><img src="{% static '/icon/zhihu.png' %}" alt=""></a>
              {% endif %}
              {% if about.email %}
                    <a href="mailto: {{ about.email }}" target="_blank"><img src="{% static '/icon/gmail.png' %}" alt=""></a>
              {% endif %}
              {% if about.stackoverflow %}
                    <a href="{{ about.stackoverflow }}" target="_blank"><img src="{% static '/icon/stackoverflow.png' %}" alt=""></a>
              {% endif %}
          </div>
      </div>
    </el-card>
    <br><br>
    <el-card class="box-card">
      <div class="text item">
          <a href="">标签云</a><br>
          {% for foo in tag_yun %}
              {% if foo.num_post > 0 %}
                  {% if foo.num_post <= 10 %}
                    <font style="font-size:{{ foo.num_post|add:20 }}px;"><a href="{% url 'blog:blogtags' %}?tid={{ foo.id }}" style="color: #CCCCCC">{{ foo.tag }}&nbsp;</a></font>
                  {% elif foo.num_post > 20 %}
                    <font style="font-size:{{ foo.num_post|add:30 }}px;"><a href="{% url 'blog:blogtags' %}?tid={{ foo.id }}" style="color: #CCCCCC">{{ foo.tag }}&nbsp;</a></font>
                  {% elif foo.num_post > 30 %}
                    <font style="font-size:60px;"><a href="{% url 'blog:blogtags' %}?tid={{ foo.id }}" style="color: #CCCCCC">{{ foo.tag }}&nbsp;</a></font>
                  {% endif %}
              {% endif %}

          {% endfor %}

      </div>
    </el-card>
    <br><br>
    <el-card class="box-card">
    {% if ad_list %}
         {% for foo in ad_list %}
             <div style="position:relative;">
                 <a href="{{ foo.url }}"><img src="/media/{{ foo.img }}" alt="" style="height: 100%;width: 100%"></a>
                 <div style="position:absolute; z-index:2; left:10px; bottom:20px; color: #FFFFFF"><a href="{{ foo.url }}">{{ foo.title }}</a></div>
             </div>
            <br>
         {% endfor %}
    {% else %}
        <div style="position:relative;">
        　　<a href="https://www.vultr.com/?ref=7788287"><img src="/media/tu/vultr.jpg" alt="" style="height: 100%;width: 100%"></a>
            <div style="position:absolute; z-index:2; left:10px; bottom:20px; color: #FFFFFF"><a href="https://www.vultr.com/?ref=7788287">vultr 境外vps 可SS，每月仅需$3.5</a></div>
        </div>
        <br>
        <a href="https://cloud.tencent.com/redirect.php?redirect=1036&cps_key=0d9335e9885e6daf3baac60c53b18e41&from=console"><img src="/media/tu/tengxun.jpg" alt="" style="height: 100%;width: 100%" ></a>
        <br>
    {% endif %}
    </el-card>
    <br><br>
    <el-card class="box-card">
      <div class="text item">

      <h4 style="color: grey">友情链接</h4>
        <ul>
        {% for link in link_list %}
            <li style="color: #bbb">
                <a href="{{ link.url }}" style="color: grey">{{ link.title }}</a></li>
                <br>
            </li>
        {% endfor %}
        </ul>

      </div>
    </el-card>

{#{% block js %}#}
{##}
{#{% endblock %}#}